<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清理缓存</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔧</text></svg>">
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    .container {
      text-align: center;
      background: rgba(255, 255, 255, 0.1);
      padding: 40px;
      border-radius: 10px;
      backdrop-filter: blur(10px);
    }
    button {
      background: white;
      color: #667eea;
      border: none;
      padding: 15px 30px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
      margin: 10px;
      font-weight: bold;
    }
    button:hover {
      background: #f0f0f0;
    }
    .status {
      margin-top: 20px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      min-height: 60px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🔧 系统维护工具</h1>
    <p>如果遇到登录问题，请点击下方按钮清理缓存</p>
    
    <button onclick="clearCache()">🗑️ 清除缓存并重新登录</button>
    <button onclick="checkStatus()">🔍 检查系统状态</button>
    
    <div class="status" id="status">
      <p>准备就绪</p>
    </div>
  </div>

  <script>
    function clearCache() {
      const status = document.getElementById('status');
      status.innerHTML = '<p>⏳ 正在清理...</p>';
      
      try {
        // 清除 localStorage
        localStorage.clear();
        
        // 清除 sessionStorage
        sessionStorage.clear();
        
        status.innerHTML = `
          <p>✅ 缓存清理完成！</p>
          <p>3秒后跳转到登录页...</p>
        `;
        
        setTimeout(() => {
          window.location.href = '/login.html';
        }, 3000);
      } catch (error) {
        status.innerHTML = `<p>❌ 清理失败: ${error.message}</p>`;
      }
    }
    
    function checkStatus() {
      const status = document.getElementById('status');
      
      const hasToken = !!localStorage.getItem('token');
      const hasUsername = !!localStorage.getItem('username');
      
      status.innerHTML = `
        <p><strong>系统状态检查：</strong></p>
        <p>Token: ${hasToken ? '✅ 存在' : '❌ 不存在'}</p>
        <p>用户名: ${hasUsername ? '✅ 存在' : '❌ 不存在'}</p>
        <p>后端地址: http://localhost:3000</p>
        <p>前端地址: http://localhost:8080</p>
      `;
      
      // 测试后端连接
      fetch('http://localhost:3000/health')
        .then(res => res.json())
        .then(data => {
          status.innerHTML += '<p>后端服务: ✅ 正常</p>';
        })
        .catch(err => {
          status.innerHTML += '<p>后端服务: ❌ 无法连接</p>';
        });
    }
  </script>
</body>
</html> 